import React, { useState } from "react";
import styles from "./index.module.less";
import { Button, Form, Input, Modal, Select } from "antd";
import ModuleForm from "../ModuleForm";

function index() {
  const [isModalOpen, setIsModalOpen] = useState(false);

  const [form] = Form.useForm();

  const showModal = () => {
    setIsModalOpen(true);
  };

  const handleOk = () => {
    form.submit();
    console.log("form", form.getFieldsValue());
    setIsModalOpen(false);
  };

  const handleCancel = () => {
    setIsModalOpen(false);
  };
  return (
    <div>
      <div className={styles.top}>
        <Form layout="inline">
          <Form.Item label="昵称">
            <Input placeholder="请输入昵称" allowClear />
          </Form.Item>

          <Form.Item label="邮箱">
            <Input placeholder="请输入邮箱" allowClear />
          </Form.Item>

          <Form.Item label="性别">
            <Select
              style={{ width: 120 }}
              placeholder="请选择性别"
              options={[
                { label: "男", value: "男" },
                { label: "女", value: "女" },
              ]}
            />
          </Form.Item>

          <Form.Item label="封号">
            <Select
              style={{ width: 200 }}
              placeholder="是否查询封号用户"
              options={[
                { label: "封号", value: "封号" },
                { label: "未封号", value: "未封号" },
              ]}
            />
          </Form.Item>

          <Form.Item>
            <Button type="primary">查询</Button>
            <Button style={{ marginLeft: 10 }}>重置</Button>
          </Form.Item>
        </Form>
      </div>
      <div className={styles.up}>
        <Button onClick={showModal} type="primary">
          新增
        </Button>
        <Button style={{ marginLeft: 10 }}>刷新</Button>
      </div>
      <Modal
        title="新增人员"
        open={isModalOpen}
        onOk={handleOk}
        onCancel={handleCancel}
      >
        <ModuleForm form={form} />
      </Modal>
    </div>
  );
}

export default index;
